<template>
  <div class="banner">
      
    <div class="swiper-container">
       <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://static.maizuo.com/v5/upload/189bcf606b4bf49ad5de201a2ea5024d.jpg?x-oss-process=image/quality,Q_70" alt=""></div>
        <div class="swiper-slide"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2050492523,3272251604&fm=15&gp=0.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2468831854,1735054260&fm=26&gp=0.jpg" alt=""></div>
        
      </div> 
     
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "../../node_modules/swiper/dist/css/swiper.min.css";
export default {
  created() {
  },
  methods: {

    _initSwiper() {
      var swiper = new Swiper(".swiper-container", {
        loop: true,
        loopAdditionalSlides : 1,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
      });
    }
  },
  mounted() {
    this._initSwiper();
  }
};
</script>
<style scoped>
.banner {
  width: 100%;
  height: 1.5rem;
}
.swiper-container {
  width: 100%;
  height: 1.5rem;
}
.swiper-slide img{
  height: 100%;
  width: 100%;
}
</style>